<template>
  <div>
    <div class="ticket_bg">
      <p class="title-sz">
        <span>票夹</span>
      </p>
      <van-swipe  class="bg" @change="onChange">
        <van-swipe-item  v-for="(item, index) in ticket" :key="index" >
          <p class="font-sz">{{ item.name }}</p>
          <p class="time-sz">{{ item.time }}</p>
          <img src="https://cdn7.axureshop.com/demo/1564251/images/%E7%A5%A8%E5%A4%B9/u4218.png" class="line-img line">
          <div class="parent-container">
          <!-- <qrCode :num="item.num"/> -->
          <canvas :id="item.id"></canvas>
            <!-- <img v-lazy="item.img" /> -->
          </div>
          <p class="num">{{ item.num }}</p>
          <img src="https://cdn7.axureshop.com/demo/1564251/images/%E7%A5%A8%E5%A4%B9/u4218.png" class="line-img">
          <p class="tip">
            <span>请至自助取票机处扫描二维码或输入券码领取纸质票入场</span>
          </p>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import QRCode from 'qrcode'

Vue.use(QRCode)

export default {
  components: {
    QRCode
  },
  data() {
    return {
      current: 0,
      ticket: [
        {
          name:'舞台剧东野圭吾【虚无的十字架】',
          time:'2020年09月17日 19:00',
          // img:'	https://cdn7.axureshop.com/demo/1564251/images/%E7%A5%A8%E5%A4%B9/u4220.png',
          num:'0609 0080 7757',
          id: 0
        },
        {
          name:'莫奈·印象作品展',
          time:'2020年09月17日 19:00',
          // img:'	https://cdn7.axureshop.com/demo/1564251/images/%E7%A5%A8%E5%A4%B9/u4220.png',
          num:'0609 0080 7758',
          id: 1
        },
        {
          name:'sasakure.UK 全球巡演',
          time:'2020年09月17日 19:00',
          // img:'	https://cdn7.axureshop.com/demo/1564251/images/%E7%A5%A8%E5%A4%B9/u4220.png',
          num:'0609 0080 7759',
          id: 2
        }
      ],

    };
  },
  methods: {
    useqrcode(){
            // const canvasId = `canvas-${index}`''
      let canvas = document.getElementById('0')
      let text = this.ticket[0].num
      QRCode.toCanvas(canvas,text,function(error){
        if (error) {
          console.log(error);
        } else {
          console.log("success!");
          canvas.style.height = '180px'
          canvas.style.width = '180px'
        }
      })
    },
    onChange(index) {
      // Toast('当前 Swipe 索引：' + index)
      // console.log(typeof(index));
      let id= index.toString(16)
      // console.log(id,typeof(id));
      let text = this.ticket[index].num
      // console.log(text);
      let canvas = document.getElementById(id);
      QRCode.toCanvas(canvas,text,function(error){
        if (error) {
          console.log(error);
        } else {
          console.log("success!");
          canvas.style.height = '180px'
          canvas.style.width = '180px'
        }
      })
  },
},
  mounted() {
    this.useqrcode()
  }
};
</script>

<style lang="scss" scoped>
p{
  margin: 0;
  padding: 0;
}
.ticket_bg {
  width: 375px;
  height: 667px;
  background-image: url("https://cdn7.axureshop.com/demo/1564251/images/%E7%A5%A8%E5%A4%B9/u4175.jpg");
  background-size: 375px 667px;
  // background-repeat: no-repeat;
  // position: relative;
  :deep(.bg) {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 15px rgba(242, 242, 242, 1);
    width: 336px;
    height: 360px;
    border-radius: 8px;
    margin: 60px auto;
  }
  .parent-container{
    display: flex;
    justify-content: center;
    align-items: center;
    img {
    width: 140px;
    height: 140px;
    }
  }
  .num{
    font-size: 16px;
    width: 122px;
    height: 16px;
    line-height: 16px;
    margin: 0 auto;
    text-align: center;
  }
  .line {
    position: absolute;
  }
  .tip{
    font-size: 12px;
    width: 260px;
    height: 44px;
    line-height: 22px;
    color: #999;
    text-align: center;
    margin: 0 auto;
  }
  .line-img{
    border-width: 0px;
    margin-left: 15px;
    // background-color: peru;
  // position: absolute;
  // left: -1px;
  // top: -1px;
    width: 304px;
    height: 5px;
  }
}
.title-sz {
  margin: 0;
  font-family: "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC";
  font-weight: 500;
  font-size: 24px;
  text-align: left;
  margin-left: 5%;
  padding-top: 5%;
}
.font-sz {
    width: 241px;
    height: 28px;
    line-height: 28px;
    font-family:'PingFangSC-Medium','PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
    font-weight:500;
    font-size: 16px;
    margin-top: 5%;
    margin-left: 5%;
    // background-color: green;
}
.time-sz {
    width: 241px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
    font-weight:400;
    color:#666666;
    margin-left: 5%;
    // background-color: deeppink;
}
// ::v-deep .canvas {
//   width: 180px !important;
//   height: 180px;
// }
</style>